<template>
  <div class="siteMap mt-80">
    <div v-if="isLogin">
      <routestationAll
        :routeName="routeName"
        :collectDatas="collectDatas"
        :isBackBtn="false"
        @handleCollect="handleCollect"
        v-if="collectDatas.length && isCollectDatas"
      />
      <el-empty
        :description="$t('langName.langName31')"
        v-if="!collectDatas.length && isCollectDatas"
      ></el-empty>
    </div>
    <div v-else>
      <el-empty :description="$t('langName.langName33')"></el-empty>
    </div>
  </div>
</template>

<script>
import routestationAll from "@/components/routestationAll";
import { getCellectionList } from "@/api/collect";
import { getRefreshTime } from "@/utils/location";
import { mapState } from "vuex";
export default {
  components: {
    routestationAll,
  },
  data() {
    return {
      routeName: this.$t("langName.langName4"),
      collectDatas: [],
      isCollectDatas: false,
      isLogin: true,
      refreshTime: null,
    };
  },
  computed: {
    ...mapState(["changeRefresh"]),
  },
  watch: {
    changeRefresh() {
      this.refreshTime = getRefreshTime(this.$store.state.changeRefresh);
      this.getRefreshCellectionList();
    },
  },
  created() {
    if (localStorage.getItem("userId")) {
      this.isLogin = true;
      this.refreshTime = getRefreshTime(this.$store.state.changeRefresh); // 刷新设置时间
      this.getCellectionList();
      this.getRefreshCellectionList();
    } else {
      this.isLogin = false;
    }
  },

  methods: {
    // 获取收藏列表
    async getCellectionList() {
      let { status, data } = await getCellectionList(
        localStorage.getItem("userId")
      );
      if (status == 200) {
        if (data) {
          data.forEach((item) => {
            item.isCollect = true;
          });
          this.collectDatas = data;
          this.$store.commit("setRouteListStore", data[0]);
        } else {
          this.collectDatas = [];
        }
        this.isCollectDatas = true;
      }
    },
    // 刷新收藏列表
    async getRefreshCellectionList() {
      clearInterval(this.setTime);
      this.setTime = setInterval(async () => {
        this.getCellectionList();
      }, this.refreshTime);
    },
    // 进行收藏
    handleCollect() {
      this.getCellectionList();
    },
  },
  // 离开清空定时器
  destroyed() {
    clearInterval(this.setTime);
  },
};
</script>
<style lang="scss" scoped>
.el-empty {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
</style>
